<template>
	<!-- 
	swiper中的transfrom会使fixed失效,此时用height="100%"固定高度; 
	swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
	-->
	 <mescroll-uni ref="mescrollRef"  height="100%" top="100" style="overflow:auto;">
		<!-- 数据列表 -->
		<mescroll-body>
		<view class="">
			<view class="Item">
				<view class="item-link item-content">
					<view class="item-inner">
						<view class="item-text">
							<view>{{tab.name}}</view>						
						</view>
					</view>
					<view class="item-inner">
						<view class="item-text"  v-for="fileId in tab.fields">
							<view  class="ispan">{{fileId.name}}：</view>
							<view class="span">{{fileId.value}}</view>							
						</view>
	
					</view>
					
				</view>
			</view>
		</view>
		</mescroll-body>
	</mescroll-uni>
	
</template>

<script>
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	var self;
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		components: {
			MescrollBody
			,
			MescrollUni
		},
		data() {
			return {
				downOption:{
					auto:true, // 不自动加载 (mixin已处理第一个tab触发downCallback)
					native: false,
					beforeEndDownScroll: 1000,
					textInOffset:"下拉刷新",
					textOutOffset:"释放刷新",
					textLoading:"加载中..."
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 6 // 每页数据的数量,默认10
					},
					noMoreSize: 3, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					toTop:{
						src : "../../static/images/totop.png" ,
						offset : 50,
						duration : 300,
						zIndex: 9990,
						right: 20,
						bottom: 120,
						safearea: false,
						width: 72,
						radius: "50%",
						left: null
					},
				},
				goods: [], //列表数据
				model: {},
				newmodel:{},
				loginName: "",
				AssetId: "",
				documentDetailId:"",
				documentId:"",
			}
		},
		props:{
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default(){
					return 0
				}
			},
			tab: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
				type: Object,
				default(){
					return []
				}
			}
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll();
			},
		},
		onLoad(options) {
			self=this;
			var AssetId=uni.getStorageSync("CurrAssetId");
			var documentDetailId=uni.getStorageSync("CurrdocumentDetailId");
			var CurrdocumentId=uni.getStorageSync("CurrdocumentId");
			
		}
	}
</script>
<style>
	.Item {
		border: 1px solid #e6e6e6;
		overflow: hidden;
		padding-bottom: 16rpx;
		border-radius: 16rpx;
		background: #fff;
		margin-top: 10rpx;
	}
	
	.item-text .span {
		display: inline-block;
		width: 72%;
		float: right;
		
	}
	
	.item-text .ispan {
		font-style: normal;
		width: 25%;
		display: inline-block;
		color: #9E9CA5;
	}
	
	.item-content {
		padding-left: 0;
	}
	
	.item-title .ispan {
		font-size: 30rpx;
		width: auto;
		height: auto;
	}
	
	.item-title {
		font-size: 40rpx;
		color: #454545;
		width: 100%;
	}
	
	.item-title-row {
		background-image: none;
		padding-right: 0px;
	}
	
	.item-link .item-inner {
		padding-right: 0;
	}
	.item-text {
		font-size: 30rpx;
		color: #454545;
		margin: 20rpx 0;
		padding-left: 20rpx;
		line-height: 1.2;
	}
	
</style>

